<template>
  <a-modal
    v-model:open="open"
    title="编辑业主信息"
    @ok="Submit"
    @cancel="onCancel"
    :width="700"
    okText="提交"
    cancelText="取消"
  >
    <a-form :model="formState" :rules="rules">
      <h3 style="text-align: center; margin-bottom: 20px">业主信息</h3>
      <a-row>
        <a-col :span="12">
          <a-form-item label="业主姓名">
            <a-input v-model:value="formState.ownerName" style="width: 200px" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="业主性别">
            <a-select
              v-model:value="formState.ownerSex"
              style="width: 200px"
              :options="sexOption"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label="身份证号">
            <a-input v-model:value="formState.idCard" style="width: 200px" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="手机号码">
            <a-input v-model:value="formState.phoneNum" style="width: 200px" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-form-item label="家庭住址" name="nativePlace" style="width: 600px">
          <a-textarea v-model:value="formState.nativePlace" />
        </a-form-item>
      </a-row>

      <a-form-item label="业主头像" name="ownerImg">
        <div style="display: flex">
          <a-image
            v-if="formState.ownerImg !== ''"
            :width="30"
            :src="'http://127.0.0.1:8090/' + formState.ownerImg"
          />
          <!-- antd的upload会遇到跨域问题，需要手动设置请求头 -->
          <a-upload
            :headers="{
              'X-Requested-With': null,
            }"
            :maxCount="1"
            name="file"
            list-type="picture-card"
            style="margin-left: 20px"
            class="avatar-uploader"
            :show-upload-list="false"
            action="http://127.0.0.1:8090/api/v1/upload"
            @change="
              (info) => {
                handleUpload(info, 'ownerImg')
              }
            "
          >
            <div class="ant-upload-text">
              {{ formState.ownerImg !== '' ? '重新上传' : '上传' }}
            </div>
          </a-upload>
        </div>
      </a-form-item>

      <h3 style="text-align: center; margin-bottom: 20px">房屋信息</h3>
      <a-row>
        <a-col :span="12">
          <a-form-item label="房屋类型" name="houseType">
            <a-input v-model:value="formState.houseType" style="width: 200px" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="房屋面积" name="builtArea">
            <a-input
              v-model:value="formState.builtArea"
              style="width: 200px"
              suffix="㎡"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label="房屋朝向" name="orientation">
            <a-input
              v-model:value="formState.orientation"
              style="width: 200px"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="物业类型" name="propertyType">
            <a-select
              v-model:value="formState.propertyType"
              style="width: 200px"
              :options="propertyOption"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="房屋号码" name="houseAddress">
        <a-input
          v-model:value="formState.houseAddress"
          disabled
          style="width: 200px"
        />
      </a-form-item>
      <a-form-item label="户型图" name="houseImg">
        <div style="display: flex">
          <a-image
            v-if="formState?.houseImg"
            :width="37"
            :src="'http://127.0.0.1:8090/' + formState.houseImg"
          />
          <a-upload
            :headers="{
              'X-Requested-With': null,
            }"
            :maxCount="1"
            name="file"
            list-type="picture-card"
            style="margin-left: 20px"
            class="avatar-uploader"
            :show-upload-list="false"
            action="http://127.0.0.1:8090/api/v1/upload"
            @change="
              (info) => {
                handleUpload(info, 'houseImg')
              }
            "
          >
            <div class="ant-upload-text">
              {{ formState.houseImg !== '' ? '重新上传' : '上传' }}
            </div>
          </a-upload>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { message } from 'ant-design-vue'
import { updateInfo } from '@/api/api'
import _ from 'lodash'

// 监听props的变化，更新form数据
const props = defineProps({
  formData: {
    type: Object,
    default: {},
  },
  formOpen: {
    type: Boolean,
    default: false,
  },
})

watch(
  () => props.formData,
  (val) => {
    if (Object.keys(val).length) {
      const newData = Object.assign(initialFormData, val)
      for (let key in newData) {
        if (Object.keys(formState).includes(key)) {
          formState[key] = newData[key]
        }
      }
    }
  }
)

watch(
  () => props.formOpen,
  (val) => {
    open.value = val
  }
)

const imageUrl = ref('')
const loading = ref(false)
const initialFormData = {
  ownerName: '',
  ownerSex: '',
  idCard: '',
  phoneNum: '',
  nativePlace: '',
  ownerImg: '',
  houseType: '',
  builtArea: '',
  orientation: '',
  propertyType: '',
  houseAddress: '',
  houseImg: '',
  id: '',
}
const formState = reactive(_.cloneDeep(initialFormData))

const sexOption = [
  {
    value: '男',
    label: '男',
  },
  {
    value: '女',
    label: '女',
  },
]

const propertyOption = [
  {
    value: '1',
    label: '居民物业',
  },
  {
    value: '2',
    label: '商业物业',
  },
  {
    value: '3',
    label: '工业物业',
  },
  {
    value: '4',
    label: '其他物业',
  },
]

const rules = {
  ownerName: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'change',
    },
    {
      min: 2,
      max: 5,
      message: 'Length should be 2 to 5',
      trigger: 'blur',
    },
  ],
  idCard: [
    {
      required: true,
      message: '请输入身份证号',
      trigger: 'change',
    },
    {
      min: 18,
      max: 18,
      message: '请输入18位身份证号',
      trigger: 'blur',
    },
  ],
}

const open = ref(false)

const Submit = async () => {
  const res = await updateInfo(formState)
  if (res.code === 200) {
    message.success('提交成功')
    onCancel()
  }
}

const emits = defineEmits(['onClose'])
const onCancel = () => {
  open.value = false
  emits('onClose')
}

// 图片上传
const handleUpload = (info, type) => {
  if (info.file.status === 'uploading') {
    loading.value = true
    return
  }
  if (info.file.status === 'done') {
    // 获取图片地址
    formState[type] = info.file.response.data
  }
  if (info.file.status === 'error') {
    loading.value = false
    message.error('upload error')
  }
}
</script>
<style>
.ant-upload-select-picture-card i {
  font-size: 16px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-upload-wrapper.ant-upload-picture-card-wrapper
  .ant-upload.ant-upload-select {
  height: 40px;
}
</style>
